<template>
    <div class="custom-table">
      <!-- 第一级分组：按顶层分类 -->
      <div 
        v-for="category in processedData" 
        :key="category.name"
        class="category-group"
      >
        <h3 class="category-title">{{ category.name }}</h3>
  
        <!-- 第二级分组：按indexName -->
        <div 
          v-for="group in category.groups" 
          :key="group.indexName"
          class="index-group"
        >
          <div class="group-header">
            <span class="group-title">{{ group.indexName }}</span>
            <span class="group-stats">(共 {{ group.items.length }} 项)</span>
          </div>
  
          <table class="data-table">
        <thead>
          <tr>
            <th class="col-name">指标名称</th>
            <th class="col-value">指标值</th>
            <th class="col-code">编码</th>
            <th class="col-location">位置</th>
          </tr>
        </thead>
        <tbody>
          <!-- 在真实tr元素上设置key -->
          <tr 
            v-for="item in group.items" 
            :key="item.code + item.indexId"  <!-- 使用组合唯一标识 -->
          >
            <td class="col-name">{{ item.name }}</td>
            <td class="col-value">{{ formatValue(item.value) }}</td>
            <td class="col-code">{{ item.code }}</td>
            <td class="col-location">
              <span class="location-pin">📍</span>
              {{ formatLocation(item.location) }}
            </td>
          </tr>
        </tbody>
        
        <!-- 统计行 -->
        <tfoot>
          <tr class="stats-row">
            <td colspan="4">
              <div class="stats-container">
                <span class="stat-item">总数：{{ group.items.length }}</span>
                <span class="stat-item">总和：{{ calculateSum(group.items) }}</span>
                <span class="stat-item">均值：{{ calculateAverage(group.items) }}</span>
              </div>
            </td>
          </tr>
        </tfoot>
      </table>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { Component, Vue, Prop } from 'vue-property-decorator';
  
  interface ProcessedData {
    name: string;       // 顶层分类名称（如：通用类别）
    groups: GroupedItem[]; // 二级分组
  }
  
  interface GroupedItem {
    indexName: string;
    items: any[];
  }
  
  @Component
  export default class NativeGroupTable extends Vue {
    @Prop({ required: true }) readonly data!: any[];
  
    get processedData(): ProcessedData[] {
      // 处理原始数据格式
      return this.data.map(category => ({
        name: category.name,
        groups: this.groupByIndexName(category.data)
      }));
    }
  
    // 二级分组方法
    private groupByIndexName(items: any[]): GroupedItem[] {
      const groups = items.reduce((acc, current) => {
        const key = current.indexName;
        acc[key] = acc[key] || { indexName: key, items: [] };
        acc[key].items.push(current);
        return acc;
      }, {} as Record<string, GroupedItem>);
  
      return Object.values(groups);
    }
  
    // 其他方法保持不变...
  }
  </script>
  
  <style scoped>
  /* 新增样式 */
  .category-group {
    margin-bottom: 32px;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
  }
  
  .category-title {
    padding: 16px;
    margin: 0;
    background-color: #f0f7ff;
    border-bottom: 1px solid #cce5ff;
    color: #004085;
  }
  
  .index-group {
    margin: 16px;
  }
  </style>